<template>
	<view class="full-page theme-1 root-style">
		<!-- #ifdef MP -->
		<u-navbar :is-back="false" is-fixed :background="{background: '#00000000'}" :border-bottom="false"></u-navbar>
		<!-- #endif -->
		<user-header></user-header>
		<!-- 
		<u-cell-group>
			<u-cell-item icon="chat-fill" title="我的老师:XXX" @tap="chooseAvatar"></u-cell-item>
			<u-cell-item icon="chat-fill" title="我的学员" @tap="chooseAvatar"></u-cell-item>
			<u-cell-item icon="tags-fill" title="我的教材" @tap="chooseAvatar"></u-cell-item>
			
		</u-cell-group>
		-->
		<u-cell-group style="margin-top:15px;">
			<u-cell-item title="教学报告" @tap="gotoTeacherReport" v-if="ktluser.hasRole(2)" icon="file-text-fill" :icon-style="iconStyle"></u-cell-item>
			<u-cell-item title="我的学员" @tap="gotoMyStudent" v-if="ktluser.hasRole(2)" icon="file-text-fill" :icon-style="iconStyle"></u-cell-item>
			<u-cell-item title="总体报告" @tap="gotoMyReport" v-if="ktluser.hasRole([3, 4])" icon="file-text-fill" :icon-style="iconStyle"></u-cell-item>
			<u-cell-item title="过程报告" @tap="gotoMyProcessReport" v-if="ktluser.hasRole([3, 4])" icon="file-text-fill" :icon-style="iconStyle"></u-cell-item>
			<u-cell-item title="礼品兑换" @tap="gotoStore" v-if="ktluser.hasRole([3, 4])" icon="file-text-fill" :icon-style="iconStyle"></u-cell-item> 
			<u-cell-item title="修改头像" @tap="chooseAvatar" icon="photo-fill" :icon-style="iconStyle"></u-cell-item>
			<u-cell-item title="修改密码" @tap="changePwd" icon="eye-fill" :icon-style="iconStyle"></u-cell-item>  
			<u-cell-item title="退出登录" @tap="handleExit" icon="more-circle-fill" :icon-style="iconStyle"></u-cell-item>
		</u-cell-group>  
		<view style="font-size: var(--text-12); color:#777; width:100%; text-align: center; margin-top: 15px;">
			当前版本 {{version}}
		</view>
		<u-tabbar
			:list="tabbar"
			:height="tabbarConfig.height"
			:icon-size="tabbarConfig.iconSize"
			:text-size="tabbarConfig.textSize"
			hide-tab-bar
		></u-tabbar>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { dateFormat, ktluser, ktlapi, getVersion } from '@/utils';
	import { useTabbarStore } from '@/store/tabbar';
	import { useTabbarConfig } from '@/common/hooks/tabbar-config.js';
	import { HTTP_REQUEST_INFO } from '@/common/config';
	
	const { tabbar } = useTabbarStore();
	const { tabbarConfig } = useTabbarConfig();
	const version = ref("");
	
	const user = ktluser.getUser(false)
	// console.log('user', user)
	const Period = dateFormat(user.Period)
	const avatar = ref(`background-image:url(${user.HeadImg||'https://nx5.abc5g.com/res/static/logo.png'})`);
	onShareAppMessage(()=>{})
	function changePwd(){
		uni.navigateTo({
			url: "/pages-ucenter/password/password"
		})
	}
	const iconStyle = computed(() => {
		// #ifdef H5
		return { marginTop: '3px' }
		// #endif
		// #ifdef MP
		return { marginTop: '1px' }
		// #endif
	})
	const roles = ktluser.Roles();
	const name = ktluser.BaseInfo().Name;
	function handleExit(){
		uni.showModal({
			content: '确定要退出登录吗？'
		}).then(res => {
			if(res.confirm){
				ktluser.logoff();
			}
		})
	}
	
	function chooseAvatar() {
		// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
		uni.navigateTo({
			url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper?destWidth=300&rectWidth=200&fileType=jpg',
		})
		// ctx.$u.route({
		// 	// 关于此路径，请见下方"注意事项"
		// 	url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper',
		// 	// 内部已设置以下默认参数值，可不传这些参数
		// 	params: {
		// 		// 输出图片宽度，高等于宽，单位px
		// 		destWidth: 300,
		// 		// 裁剪框宽度，高等于宽，单位px
		// 		rectWidth: 200,
		// 		// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
		// 		fileType: 'jpg',
		// 	}
		// })
	}
	
	function gotoTeacherReport() {
		uni.navigateTo({
			url: '/pages-ucenter/teacher-report/teacher-report'
		})
	}
	function gotoStore(){
		uni.navigateTo({
			url: '/pages-ucenter/store/store'
		})
	}
	function gotoMyReport() {
		uni.navigateTo({
			url: "/pages-ucenter/study-report/study-report"
		})
	}
	function gotoMyProcessReport() {
		uni.navigateTo({
			url: "/pages-ucenter/study-report/study-process-report"
		})
	}
	function gotoMyStudent(){
		uni.navigateTo({
			url: "/pages-ucenter/student-list/student-list"
		})
	}
	
	onMounted(() => {
		version.value = getVersion();
		// 监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', path => {
			avatar.value = `background-image:url(${path})`;
			console.log('path', path)
			let uploadurl = '/ApiFilter/UploadFiles.ashx';
			// #ifdef MP-WEIXIN
			uploadurl = 'https://nx5.abc5g.com/ApiFilter/UploadFiles.ashx'
			// #endif
			uni.uploadFile({
				url: uploadurl, //仅为示例，非真实的接口地址
				filePath: path,
				name: 'file',
				formData: { 
				},
				success: (uploadFileRes) => {
					var file = JSON.parse(uploadFileRes.data)[0].file;
					avatar.value = `background-image:url(https://nx5.abc5g.com${file})`;
					console.log('file', file);
					
					uni.showLoading({
						title: '加载中'
					});
					ktlapi({ 
						action: "Cus_UpdateHeadImg",
						data: {
							"ID": user.AccountID,
							"Path": 'https://nx5.abc5g.com' + file,
						}
					}).then(res => {
						user.HeadImg = 'https://nx5.abc5g.com' + file;
						ktluser.setUser(user);
						uni.hideLoading();
					});
				},
				fail(err) {
					console.error('err',err)
				}
			});
		})
	})
</script>

<style lang="scss">
	.full-page{
		--card-margin: 30rpx;
		background-color: #f8f9fb !important;
	}
	.action-box {
		margin: var(--card-margin);
		color: #555;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0px 0px 4px -1px rgba(140, 190, 238, 0.2);
		margin-bottom: 16px;
	}
	.header {
		width: 120rpx;
		height: 120rpx;
		background-image: url(https://nx5.abc5g.com/res/static/logo.png);
		background-size: 100% 100%;
		background-color: #f8f9fb !important;
		border-radius: 50%;
		;
	}
	.studentinfo {
		margin-left: 20rpx;
		font-size: var(--text-18);
		font-weight: bold;
		color: #f8f9fb;
	}
</style>